<template>
  <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
    <view 
      class="bg-[#e4f0e4] p-[24rpx] btops border-b border-gray-100 flex items-center justify-between"
    >
      <text class="text-[28rpx] font-bold text-gray-800">{{ title }}</text>
    </view>
    <view v-show="true" class="p-[24rpx] transition-all duration-300">
      <slot />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'

interface Props {
  title: string
  isExpanded: boolean
  showArrow?: boolean
}

interface Emits {
  (e: 'toggle'): void
}

const props = withDefaults(defineProps<Props>(), {
  showArrow: false
})

const emit = defineEmits<Emits>()

const handleToggle = () => {}
</script>

<style scoped lang="scss">
.btops {
  border-top: solid 6rpx #8bc34a;
}

.rotate-0 {
  transform: rotate(0deg);
}

.rotate-180 {
  transform: rotate(180deg);
}
</style>
